1"use client";
2
3
16import { Suspense, useCallback, useState } from "react";
17import { useParams, useSearchParams, useRouter } from "next/navigation";
18import { useWorkspace } from "@/hooks/use-workspace";
19import { AskAiSearch } from "@/components/search/ask-ai-search";
20
21export default function AskPage() {
22 return (
23 <Suspense
24 fallback={
25 <div className="mx-auto max-w-3xl px-6 py-8">
26 <p className="text-sm text-muted-foreground">Loading…</p>
27 </div>
28 }
29 >
30 <AskPageInner />
31 </Suspense>
32 );
33}
34
35function AskPageInner() {
36 const params = useParams<{ workspace: string }>();
37 const workspaceSlug = params?.workspace ?? "";
38 const { data: workspace } = useWorkspace(workspaceSlug);
39 const searchParams = useSearchParams();
40 const router = useRouter();
41
42
43
44 const initialQuery = searchParams.get("q") ?? searchParams.get("open") ?? "";
45
46
47
48 const onAsk = useCallback(
49 (q: string) => {
50 const next = new URLSearchParams(searchParams.toString());
51 if (q) next.set("q", q);
52 else next.delete("q");
53 next.delete("open");
54 if (next.toString() !== searchParams.toString()) {
55 router.replace(`/w/${workspaceSlug}/ask${next.toString() ? `?${next.toString()}` : ""}`, { scroll: false });
56 }
57 },
58 [searchParams, router, workspaceSlug]
59 );
60
61 return (
62 <AskAiSearch
63 workspaceId={workspace?.id ?? ""}
64 workspaceSlug={workspace?.slug ?? workspaceSlug}
65 initialQuery={initialQuery}
66 variant="page"
67 onAsk={onAsk}
68 />
69 );
70}
71